<template>
    <div class="layout-container">
        <div class="layout-container-left">
            <UseTable :tableData="tableData" custom :labels="labels" @change="change" />
        </div>

        <div class="layout-container-right">
            <div class="form-box">
                <el-form label-width="auto">
                    <el-form-item>
                        <div class="data-select">
                            <DmData @dataChange="dataChange" />
                            <Upload @uploadSuccess="uploadSuccess" />
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="handleCalculate">计算</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-divider />

            <div class="info-box">
                <h5>算法说明</h5>
                <p>
                    通过计算数据在固定窗口内的平均值，平滑短期波动，突出长期趋势，窗口大小决定平滑程度（窗口越大，趋势越平缓）。
                </p>

                <h5>
                    使用范围
                </h5>
                <ul>
                    <li>处理含随机噪声的时间序列（如股票价格、销售数据）；</li>
                    <li>识别数据的长期趋势（如季节性商品的销售规律）；</li>
                    <li>不适用于剧烈波动或突变的数据。</li>
                </ul>
            </div>
        </div>

        <Result v-model="resultShow" :result="paramsData" />
    </div>
</template>

<script setup lang="ts">
import {onActivated, onMounted, ref} from "vue"
import {ElMessage}                   from "element-plus"
import Result                        from "./components/Result.vue"
import {getExcel}                    from "@/api/data"
import Upload                        from "@/components/Upload.vue"
import UseTable                      from "@/components/UseTable.vue"
import DmData                        from "@/components/DmData.vue"

function dataChange(data) {
    tableData.value = data
}

function uploadSuccess(res) {
    tableData.value = res.data
}

let labels = ["自变量", "因变量"]

function change(list) {
    paramsData.value.x = list?.find(item => item.label === "自变量")?.value || []
    paramsData.value.y = list?.find(item => item.label === "因变量")?.value || []
}

let paramsData = ref({
    x         : [],
    y         : [],
    windowSize: 3
})

let resultShow = ref(false)
let resultData = ref("")

// 计算
function handleCalculate() {
    if (paramsData.value.x.length === 0) {
        ElMessage.warning("请选择一列作为自变量")
        return
    }

    if (paramsData.value.y.length === 0) {
        ElMessage.warning("请选择一列作为因变量")
        return
    }

    resultData.value = paramsData.value
    resultShow.value = true
}

let loading   = ref(true)
let tableData = ref([])

let getTableData = () => {
    loading.value = true

    getExcel("moving-average").then(res => res.data).then(data => tableData.value = data)

    loading.value = false
}

/**
 * 初始化参数
 */
function initParam() {

}

// -----------------------------主程序start-----------------------------------------
onMounted(() => {
    initParam()
    getTableData()
})

onActivated(() => {
    initParam()
    getTableData()
})
// -----------------------------主程序end-----------------------------------------

</script>

<style scoped>

</style>

